<template>
    <div id="app">
        <div class="product-wrap">
            <div class="product-info" v-for="item in list" :key="item.productId">
                <img :src="item.src" alt="">
            <div>
                <span>{{ item.name }}</span>
                <h4>{{ item.price }}</h4>
            </div>
        </div>
    </div>
</div>

</template>
<script setup>
    import imgSrc1 from "../assets/images/1.jpg"
    import imgSrc2 from "../assets/images/2.jpg"
    import imgSrc3 from "../assets/images/3.jpg"
    import imgSrc4 from "../assets/images/4.jpg"

    //产品数组
    const list = ([
        {productId: 1, name: "欧拉公式啤酒杯", price: "￥30.00",src:imgSrc1},
        {productId: 2, name: "高斯分布马克杯", price: "￥40.00",src:imgSrc2},
        {productId: 3, name: "泊松分布马克杯", price: "￥40.00",src:imgSrc3},
        {productId: 4, name: "范德瓦尔斯方程搪瓷杯", price: "￥35.00",src:imgSrc4}
    ]);
</script>
<style scoped>
    .product-info {  
        width: 270px;  

        float: left;  

        margin-left: 10px;  

        border: 1px solid #ececee; 

  }  

  img{width: 270px;}

  .product-info > div {  

    border-top: 1px solid #ececee;

    height: 50px;

    width: 270px;

  }  

  span{

    display: inline-block;

    padding-top: 20px;

    padding-left: 10px;

  }

  h4{

    align-items: center;

    float: right;

    margin-right: 10px;

  }

  .product-info:hover{

    border: 1px solid #979797;

    box-shadow: 0px 0px 7px #979797;

  }


</style>